<template>
	<view>
		<!-- 登录显示 -->
		<view class="loginPage">
			<view class="my_header">
				<!-- 未登录视图 -->
				
				<view class="notLoginView" v-if="!loginFlag">
					<view class="notLoginViewTop">
						<view class="notLoginViewLeft">
							<view class="notLoginViewImg">
							<image src="../../static/67c2296624f694c97154fd449f82481.png" mode="widthFix" style="width: 80px;"></image>
							</view>
							<view class="notLoginViewName" @tap="goLogin">
								点击登录
							</view>
						</view>
						<view class="notLoginViewRight">
						</view>
					</view>
					<!-- 布局所用 -->
					<view class="toolbar1"></view>
				</view>
				<!-- 已登录 -->
				<view class="userInfoBox" v-else>
					<view class="userInfoBoxLeft">
						<view class="notLoginViewImg">
						<image :src="'http://xxx.xx.xxx.xx:8066/commons/download?picName=' + userInfo.picture" 
						mode="widthFix" 
						class="userPicture"
						@click="toPersonalDetailPage"></image>
						</view>
						<view class="notLoginViewName" 
							@click="toPersonalDetailPage">
							{{ userInfo.userName }}
						</view>
					</view>
					<view class="userInfoBoxRight">
						
					</view>
				</view>
			</view>
			<!-- 收藏，积分，优惠卷 -->
			<view class="toolbar">
				<view class="collect toolbar_item" @click="toCollectionPage">
					<!-- <uni-icons type="star" size="30"></uni-icons> -->
					<view class="collectionNumber">
						{{ collectionNumber }}
					</view>
					<view class="toolbar_text">
						收藏 
					</view>
				</view>
				<view class="integral toolbar_item" @click="toIntegralPage">
					<!-- <uni-icons type="fire" size="30"></uni-icons> -->
					<view class="">
						{{ userIntegral }}
					</view>
					<view  class="toolbar_text">
						积分 
					</view>
				</view>
				<view class="coupon toolbar_item" @click="toPreferentialPage">
					<!-- <uni-icons type="wallet" size="30"></uni-icons> -->
					<view class="">
						0
					</view>
					<view class="toolbar_text">
						优惠卷 
					</view>
				</view>
			</view>
			<!-- 我的订单 -->
			<view class="indent" >
				<view class="indent_top">
					<view class="indent_top_left">
						我的订单
					</view>
					<view class="indent_top_right">
						<text style="position: relative; right: 10rpx;" 
							  @click="toOrderDetailPage(-1)"
								>
							<text style="font-size: 13px;">全部订单</text>
						</text>
						<uni-icons style="position: relative; top: -2px;" 
						type="right" size="10">
						</uni-icons>
					</view>
				</view>
				<view class="indent_bottom">
					<view class="indent_bottom_item" 
					v-for="(item, index) in myIndent" 
					:key="index"
					@click="toOrderDetailPage(index)"
					>
					<uni-badge class="uni-badge-left-margin"
							   :text="statusInfo[statuss[index]]" 
							   absolute="rightTop" 
							   :offset="[-3, -3]" 
							   size="small"
					>
						<image :src="'http://xxx.xx.xxx.xx:8066/commons/download?picName=' + item.icon"
							   mode="heightFix" 
							   style="height: 60rpx; width: 100%;">
						</image> 
					</uni-badge>  
						<text style="margin-top: 10rpx;">{{ item.text }}</text>
					</view>
				</view>
			</view>
			<!-- 底部工具栏 -->
			<view class="father">
				<text class="indent_top_left myStyle1">
					更多服务
				</text>
				<view class="bottom_toolbar">
					<view class="bottom_toolbar_item"  
					v-for="(item, index) in bottom_toolbar_data"
					:key="index"
					@click="toDetailPage(index)"
					>
						<image :src="'http://xxx.xx.xxx.xx:8066/commons/download?picName=' + item.icon"
						mode="widthFix" 
						style="width: 50rpx;"></image>
						<text style="margin-top: 10rpx;">{{ item.text }}</text>
					</view>
				</view>
			</view>
			<view class="placeholder" style="height: 40rpx;"></view>
		</view> 
	</view> 
</template>
<script>
	import { mapState, mapMutations, mapGetters } from 'vuex'
	export default {
		data() {
			return {
				loginFlag: false, // 判断是否登录成功，登录成功后修改值为true
				userInfo:{}, // 用户信息
				collectionNumber: 0, // 收藏个数  
				collectionData:[], // 收藏数据
				userIntegral: 0, // 用户积分
				badgeCount:10,
				// 我的订单项
				myIndent:[
					{text:"待付款" ,icon:"待付款.png"},
					{text:"待发货" ,icon:"待发货.png"},
					{text:"待收货" ,icon:"待收货.png"},
					{text:"退货/售后" ,icon:"售后.png"},
				],
				// 广告轮播图名称
				adData:['my_ad_swper1.jpg',"my_ad_swper2.jpg", "my_ad_swper3.jpg"],
				// 底部工具栏数据
				bottom_toolbar_data:[
					{text:"收货地址", icon:"收货地址.png"},
					{text:"我的评价", icon:"评价.png"},
					{text:"发票服务", icon:"发票.png"},
					{text:"我的客服", icon:"客服.png"},
					{text:"消息中心", icon:"消息中心.png"},
					{text:"常见问题", icon:"问题.png"},
					{text:"通用设置", icon:"设置.png"},
				],
				// 各个状态
				statuss:['notPayNumber', 'notPostNumber', 'postedNumber', 'afterSaleNumber'],
				// 存储状态信息的对象
				statusInfo:{}
			};
		},
		computed:{
			...mapState('user',['userToken']),
			...mapGetters('user', ['getUserInfoNew'])
		},
		onShow() {
			this.initMethods();
		},
		methods: {
			initMethods(){
				// 重新判断登录状态
				if(this.userToken == ""){
					this.loginFlag = false;
					// 各状态置空
					this.collectionData = [];
					this.collectionNumber = 0;
					this.statusInfo = {};
					this.userIntegral = 0;
					
					uni.showToast({
						title:"登录后享更多权益",
						icon:'none'
					})
					return true;
				}
				// 页面展示重新获取用户信息
				this.getUserInfo();
				// 获取各状态的数量
				this.getEvryNumberOfStatus();
				// 获取收藏个数
				this.getCollectionNumber();
				// 获取用户积分
				this.getUserIntegral();
			},
			// 跳转到优惠卷页面
			toPreferentialPage(){
				uni.navigateTo({
					url:"/subpkg4/preferential_card/preferential_card"
				})
			},
			// 获取积分并显示
			async getUserIntegral(){
				// 判断登录状态
				if(this.userToken == ""){
					return false;
				}
				const res = await this.$myRequest({
					url:`/orderInfos/order?userId=${this.getUserInfoNew.id}&status=${4}`
				});
				this.userIntegral = 0;
				// 计算总积分并赋值显示
				for (let item of res.data.data) {
					this.userIntegral += item.price;
				}
			},
			// 跳转到积分页面
			toIntegralPage(){
				// 判断登录状态
				if(!this.loginFlag){
					uni.showToast({
						title:"请先登录"
					});
					return true;
				}
				uni.navigateTo({
					url:"/subpkg4/integral/integral" 
				})
			},
			// 跳转到收藏页面
			toCollectionPage(){
				// 判断登录状态
				if(!this.loginFlag){
					uni.showToast({
						title:"请先登录"
					});
					return true;
				}
				uni.navigateTo({
					url:`/subpkg4/collection/collection?collectionData=${JSON.stringify(this.collectionData)}`
				})
			},
			// 获取用户的收藏个数
			async getCollectionNumber(){
				// 判断登录状态
				if(this.userToken == ""){
					return false;
				}
				const res = await this.$myRequest({
					url:`/collectionInfos/allById?userId=${this.getUserInfoNew.id}`
				});
				// 给收藏个数和数据赋值
				this.collectionNumber = res.data.data.length;
				this.collectionData = res.data.data;
			},
			// 获取各状态的数量
			async getEvryNumberOfStatus(){
				if(!this.loginFlag){
					return false;
				}
				const res = await this.$myRequest({
					url:`/orderInfos/statusAndNumber?userId=${this.userInfo.id}`
				});
				// console.log(res.data.data);
				this.statusInfo = res.data.data;
				// console.log(res.data.data);
				// 单独获取待付款的数量(从缓存中获取)
				this.getNotPayNumber();
			},
			async getNotPayNumber(){
				const res = await uni.request({
					url:`http://xxx.xxx.xx.xxx:8066/orderInfos/getNotPayByUserId?userId=${this.userInfo.id}`,
					method:'GET'
				});
				if(res[1].data.data){
					// 给待付款图标加微标
					const rstArr = res[1].data.data.filter(item => item.remainTime > 0);
					this.statusInfo.notPayNumber = rstArr.length;
				}
			},
			// 底部工具栏按需跳转
			async toDetailPage(index){
				// 判断是否登录
				if(!this.loginFlag){
					uni.showToast({
						title:"请先登录"
					});
					return true;
				}
				switch(index){
					case 0:
						// 跳转收货地址管理页面
						const [err, succ] = await uni.chooseAddress().catch(err => err);
						break;
					case 1:
						// 跳转到"我的评价"
						uni.navigateTo({
							url:"/subpkg4/evaluate_page/evaluate_page"
						})
						break;
					case 2:
						// 跳转到"我的评价"
						uni.navigateTo({
							url:"/subpkg4/invoice_page/invoice_page"
						})
						break;
					case 3:
						// 跳转到客服页面
						uni.navigateTo({
							url:"/subpkg4/service/service?isMy=ok"
						})
						break;
					case 4:
						// 跳转到消息中心
						uni.navigateTo({
							url:"/subpkg4/infomation/infomation"
						})
						break;
					case 5:
						// 跳转到常见问题页面
						uni.navigateTo({
							url:"/subpkg4/commonProblem_page/commonProblem_page"
						})
						break;
					case 6:
						// 跳转到常见问题页面
						uni.navigateTo({
							url:"/subpkg4/general_seting_page/general_seting_page"
						})
				}
				
			},
			// 跳转到订单页面
			toOrderDetailPage(index){
				// 判断是否登录了
				if(!this.loginFlag){
					uni.showToast({
						title:"请先登录"
					})
					return false;
				}
				uni.navigateTo({
					url:"/subpkg2/oder_detail/oder_detail?selected=" + (index + 1)
				})
			},
			// 获取用户信息
			getUserInfo(){
				let that = this;
				if(this.userInfo.id){
					this.$myRequest({
					url:"/userInfos/" + this.userInfo.id
					}).then(res=>{
						that.userInfo = res.data.data
					})
				}
				
			},
			...mapMutations('user', ['setUserToken', 'setUserInfo']),
			// 跳转到个人信息界面
			toPersonalDetailPage(){
				uni.navigateTo({
					url:"/subpkg2/myDetail/myDetail"
				})
			},
			// 登录按钮触发
			loginHandle() {},
			goLogin() {
				uni.showLoading({
					title:"正在微信登录...",
				})
				let that = this
			    // 获取code 小程序专有，用户登录凭证。
			    setTimeout(()=>{
					uni.login({
					    provider: 'weixin',
					    success(login) {
							// 调用登录方法
							that.loginBackend(login.code);
					    }
					})
				}, 1500)
			},
			loginBackend(code){
				let that = this;
				uni.request({
					url:"http://xxx.xxx.xx.xxx:8066/userInfos/login",
					data:{
						code:code
					},
					method:"POST",
					success(res) {
						if("request:ok" == res.errMsg){
							uni.showToast({
								title: '登录成功!',
								duration: 2000
							});
							// 处理后端返回的用户信息
							const userInfo = res.data.data.slice(9, -1); // 移除 "UserInfo(" 和 ")"
							const entries = userInfo.split(', ').map((entry) => {
								const [key, value] = entry.split('=');
								return [key.trim(), value.trim()];
							});
							// 将处理好的数据进行存储
							that.userInfo = Object.fromEntries(entries)
							// 存储用户信息到vuex中
							that.setUserInfo(JSON.stringify(Object.fromEntries(entries)))
							// 存储token到vuex中
							that.setUserToken(res.header.Authorization)
							// 如下是自己的逻辑
							that.loginFlag = true;
							that.getEvryNumberOfStatus();
							that.getCollectionNumber();
							that.getUserIntegral();
						}else{
							uni.showToast({
								title: '登录失败!',
								duration: 2000
							});
						}
						
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #ececec;
	}
	
	.father{
		background-color: #fff;
		width: 92%;
		margin: 0 auto; 
		margin-top: 29rpx;
		border-radius: 20rpx;
	}
	
	.myStyle1{
		position: relative;
		top: 25rpx;
		left: 25rpx;
	}
	
	// 底部工具栏项
	.bottom_toolbar{
		margin: 0 auto; 
		margin-top: 25rpx;
		display: flex;
		background-color: #fff;
		// justify-content: space-around;
		flex-wrap: wrap;
		padding-bottom: 20rpx;
		border-radius: 20rpx;
	}
	
	.notLoginView{
		height: 300px;
	}
	
	.bottom_toolbar_item{
		width: 22%;
		// border: solid #57b1ff 2px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: 50rpx;
		font-size: 13px;
		margin-left: 20rpx;
	}
	
	// 广告轮播
	.ADSwiper{
		width: 95%;
		margin: 0 auto;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}
	
	// 我的订单
	.indent{
		width: 89%;
		margin: 0 auto;
		background-color: #fff;
		display: flex;
		margin-top: 29rpx;
		flex-direction: column;
		border-radius: 20rpx;
		padding: 20rpx 10rpx 20rpx 10rpx;
	}
	
	.indent_top{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0px 10rpx 0rpx 10rpx;
	}
	
	.loginPage{
		background: linear-gradient(to bottom right, #f2eff6, #f2edf5, #d7e8f7, #e5e0f4, #f4f2f8);
		height: 700rpx;
		// border: solid red;
	}
	
	.indent_top_left{
		font-size: 17px;
		font-weight: 600;
	}
	
	.indent_top_right{
		position: relative;
		right: 10rpx;
		color: #7c7c7c;
	}
	
	.indent_bottom{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 35rpx;	
	}
	
	.indent_bottom_item{
		// border: solid #ff904f 2px;
		width: 23%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 13px;
	}
	
	// 收藏，积分，优惠卷
	.toolbar_item{
		width: 30%;
		height: 150rpx;
		// border: solid #93c2ff 2px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.toolbar_text{
		margin-top: 10rpx;
		font-size: 13px;
	}
	
	.toolbar{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		width: 92%;
		background-color: #fff;
		align-items: center;
		margin: 0 auto;
		border-radius: 20rpx;
		// position: relative;
		// top: -100rpx;
		margin-top: -245rpx;
	}
	
	// 登录按钮 和 登录后头部（头像和昵称）

	#loginBtn {
		width: 60%;
		font-size: 18px;
		margin-top: 50%;
		background-color: #29ce31;
		color: #ffffff;
	}
	
	
	.my_header{
		display: flex;
		height: 550rpx;
		justify-content: center;
		// margin-top: 20rpx;
		padding: 30rpx 0rpx 20rpx 0rpx;
	}
	
	.userName{
		font-weight: 600;
		color: #ffffff;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	
	.userInfoBox{
		display: flex;
		justify-content: center;
		align-content: center;
		flex-direction: row;
		align-items: center;
		width: 100%;
	}
	
	.userInfoBoxLeft{
		width: 50%;
		display: flex;
		justify-content: center;
		align-content: center;
		margin-left: 35rpx;
		margin-top: -115rpx;
	}
	
	.userInfoBoxRight{
		width: 50%;
	}
	
	.userPicture{
		width: 80px;
		border-radius: 80rpx;
	}
	
	// .toolbar1{
	// 	border: solid red;
	// 	height: 100px;
	// 	background-size: contain;
	// 	background-repeat: no-repeat;
	// 	background-image: url('../../static/矩形 1.png');
	// }
	
	.notLoginView{
		// flex-direction: row;
		width: 100%;
	}
	
	.notLoginViewTop{
		display: flex;
		flex-direction: row;
		width: 100%;
	}
	
	.notLoginViewLeft{
		width: 50%;
		display: flex;
		height: min-content;
		margin-left: 35rpx;
		margin-top: 130rpx;
	}
	
	.notLoginViewRight{
		width: 50%;
	}
	
	
	
	.notLoginViewImg{
		display: flex;
		height: min-content;
	}
	
	.notLoginViewName{
		width: 180rpx;
		display: flex;
		display: flex;
		justify-content: center;
		align-items: center;
		
		font-family: Noto Sans SC;
		font-style: normal;
		font-weight: 500;
		font-size: 17px;
		margin-left: 10rpx;
	}
</style>
